import React, { Component } from 'react'
import './index.less'
import { connect } from 'dva'
import { Layout, Menu, Breadcrumb } from 'antd'
import {
    DesktopOutlined,
    PieChartOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons'
import RouterView from '@/router/routerView'
const { Header, Content, Footer, Sider } = Layout
const { SubMenu } = Menu

const mapStateToProps = ({ base }) => {
    return {
        state: base.state,
    }
}

const mapDispatchToProps = (dispatch) => ({
    func: (obj) => dispatch({ type: 'xxx', payload: obj }),
})
@connect(mapStateToProps, mapDispatchToProps)
class index extends Component {
    state = {
        collapsed: false,
    }

    onCollapse = (collapsed) => {
        console.log('', collapsed)
        this.setState({ collapsed })
    }
    menuNav = ({ item, key, keyPath, domEvent }) => {
        console.log({ item, key, keyPath, domEvent })
    }
    render() {
        const { collapsed } = this.state
        console.log(this.props)
        return (
            <Layout style={{ minHeight: '100vh' }}>
                <Sider
                    collapsible
                    collapsed={collapsed}
                    onCollapse={this.onCollapse}
                >
                    <div className="logo" />
                    {/* 可根据项目自由遍历生成 */}
                    <Menu
                        theme="dark"
                        defaultSelectedKeys={['1']}
                        mode="inline"
                        onClick={this.menuNav}
                    >
                        <Menu.Item key="1" icon={<PieChartOutlined />}>
                            Option 1
                        </Menu.Item>
                        <Menu.Item key="2" icon={<DesktopOutlined />}>
                            Option 2
                        </Menu.Item>
                        <SubMenu
                            key="sub1"
                            icon={<UserOutlined />}
                            title="User"
                        >
                            <Menu.Item key="3">Tom</Menu.Item>
                            <Menu.Item key="4">Bill</Menu.Item>
                            <Menu.Item key="5">Alex</Menu.Item>
                        </SubMenu>
                        <SubMenu
                            key="sub2"
                            icon={<TeamOutlined />}
                            title="Team"
                        >
                            <Menu.Item key="6">Team 1</Menu.Item>
                            <Menu.Item key="8">Team 2</Menu.Item>
                        </SubMenu>
                        <Menu.Item key="9" icon={<FileOutlined />}>
                            Files
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header
                        className="site-layout-background"
                        style={{ padding: 0 }}
                    />
                    <Content style={{ margin: '0 16px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>User</Breadcrumb.Item>
                            <Breadcrumb.Item>Bill</Breadcrumb.Item>
                        </Breadcrumb>
                        <div
                            className="site-layout-background"
                            style={{ padding: 24, minHeight: 360 }}
                        >
                            <RouterView routes={this.props.routes} />
                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>
                        Ant Design ©2018 Created by Ant UED
                    </Footer>
                </Layout>
            </Layout>
        )
    }
}

export default index
